<%@ page language="java" pageEncoding="utf-8" %>
<%@ include file="/include/taglibs.jsp" %>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta content="telephone=no" name="format-detection"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <title>${map.name}</title>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${path}/static/taoshunda/share/css/common.css"/>
    <style type="text/css">
        body {
            background: #f0eff7;
        }
    </style>
    <script type="text/javascript" src="${path}/static/taoshunda/share/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="${path}/static/taoshunda/share/js/jquery.SuperSlide.2.1.1.js"></script>
    <script type="text/javascript" src="${path}/static/taoshunda/share/js/layer/layer.js"></script>
    <link rel="stylesheet" type="text/css" href="${path}/static/taoshunda/share/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="${path}/static/taoshunda/share/css/share.css"/>
    <style type="text/css">
        /* 本例子css */
    </style>
</head>

<body>
<div id="slideBox" class="slideBox">
    <%--<div class="hd">--%>
    <%--<ul>--%>
    <%--<!--<c:forEach items="${map.picture}" var="image">-->--%>
    <%--<li></li>--%>
    <%--<!--</c:forEach>-->--%>
    <%--</ul>--%>
    <%--</div>--%>
    <div class="bd">
        <ul>
            <c:forEach items="${map.bannerImages}" var="bannerImages">
                <li><img src="http://www.taoshunda.com/images/${bannerImages}" class="img" width="100%"/></li>
            </c:forEach>
        </ul>
    </div>
</div>
<div style="padding: 0 10px;">
    <div>
        <ul>
            <li class="commodity-title">${map.name}</li>
            <li class="public-color-ten public-font-seven">月售${map.saleNum}单</li>
            <li><span style="color: #FF6D13">￥${map.price}/${map.unit}</span></li>
        </ul>
    </div>
</div>
<hr/>
<div style="padding:2% 0 60px 0">
    <div class="bd">
        <div style="padding:0 10px;">
            <span class="tilte">商品详情</span>
            <br>
            <html:img content=" ${map.goodsDetail}"/>
        </div>
        <ul style="padding: 5px 0">
            <c:forEach items="${map.images}" var="images">
                <li><img src="http://www.taoshunda.com/images/${images}" class="img" width="100%"/></li>
            </c:forEach>
        </ul>
    </div>
</div>
<br>
<div style="background: #FF6D13;line-height:50px;text-align: center;display: inline-block;position: fixed;bottom: 0;width: 100%;font-size: 16px;">
    <button style="width: 100%; line-height:50px;background: #FF6D13;" id="btn"
            location="
    'http://www.taoshunda.com/setup/user.html'
    "><a
            href="http://www.taoshunda.com/setup/user.html" id="link"
            style="color: #ffffff;">点击下载淘瞬达app，淘您所爱 一瞬即达</a>
    </button>
</div>
</body>

</html>
<script type="text/javascript">

    document.getElementById("btn").onclick = function () {
        document.getElementById("link").click();
    }

    $(function () {
        jQuery(".slideBox").slide({
            mainCell: ".bd ul",
            autoPlay: true
        });
        jQuery(".picMarquee-left").slide({
            mainCell: ".bd ul",
            autoPlay: true,
            effect: "leftMarquee",
            vis: 5,
            interTime: 50,
            trigger: "click"
        });
    })
    $(document).on("click", ".img img", function () {
        var imgSrc = $(this).attr('src');
        DisplayPicture(imgSrc);
    });

    function DisplayPicture(val) {
        if (val != 'null' && typeof(val) != "undefined" && val != 0 && val != null) {
            var json = {
                "title": "", // 相册标题
                "id": 1, // 相册id
                "data": [ // 相册包含的图片，数组格式
                    {
                        "alt": "图片名",
                        "src": val, // 原图地址
                    },
                ],
            };
            layer.photos({
                photos: json,
                moveType: 1,
                closeBtn: [0, true],
            });
        } else {
            $.messager.alert('提示', '该图片不存在', 'error');
        }
    }
</script>
